{% extends 'public/base.html' %}

{% block header %}
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-sm-12">
        <form class="form-horizontal" id="addGroupForm" {% if isAdd %} action="addGroup" {% else %} action="editGroup" {% endif %}>
        <div class="row">
            <div class="col-sm-12">
                <p class="alert-info text-center" style="margin: -10px -15px 10px;">基础信息</p>

                <div class="col-sm-6">
                    <input type="hidden" name="gid" value="{{ groupInfo.id }}"/>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">组名：</label>
                        <div class="col-sm-8">
                            <input id="group_name" name="group_name" class="form-control" type="text" value="{{ groupInfo.name }}" required placeholder="请填写用户组名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">排序：</label>
                        <div class="col-sm-8">
                            <input id="sort" name="sort" class="form-control" type="digits" value="{{ groupInfo.sort }}" placeholder="请填入排序数字">
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="col-sm-8">
                            <div class="switch">
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="status_on" value="1" name="status" {% if isAdd %} checked {% endif %} {% if groupInfo.status =='1' %} checked {% endif %}>
                                    <label for="status_on">启用</label>
                                </div>
                                <div class="radio radio-danger radio-inline">
                                    <input type="radio" id="status_off" value="0" name="status" {% if groupInfo.status =='0' %} checked {% endif %}>
                                    <label for="status_off">禁用</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">描述：</label>
                        <div class="col-sm-8">
                            <textarea name="description" class="form-control" placeholder="用户组描述">{{ groupInfo.description }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="space-15"></div>
        <div class="row">
            <div class="col-sm-12">
                <p class="alert-warning text-center" style="margin: -10px -15px 10px;">权限分配</p>

                <div style="height: 220px; overflow-y: auto;" class="form-group">
                    <legend class="text-center">
                        <input id="power_checked" name="power_checked" type="hidden">
                    </legend>
                    {% for k, v in functionData if v %}
                    <fieldset class="checkbox_block">
                        <legend class="text-center">
                            <a class="btn help-block m-b-none checkbox-father" data-toggle="tooltip" data-placement="right" title="" data-original-title="点击选择全部子项或取消"><strong>{{ k }}</strong>
                                <i class="fa fa-info-circle"></i>
                            </a>
                        </legend>
                        {% for kk, vv in v %}
                        <div class="col-sm-2 checkbox checkbox-success checkbox-inline checkbox_child">
                            <input type="checkbox" name="powers[]" value="{{ vv.id }}" id="{{ vv.id }}" {% if vv.id in groupInfo.powers %} checked {% endif %}/>
                            <label for="{{ vv.id }}">{{ vv.name }}</label>
                        </div>
                        {% endfor %}
                    </fieldset>
                    <div class="space-15"></div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </form>
        <hr >
        <div class="text-center">
            <button class="btn btn-outline btn-info saveBtn" type="button" id="saveGroupBtn">
                <i class="fa fa-check"></i>提交
            </button>
            <button class="btn btn-outline btn-default closeBtn">
                <i class="fa fa-times"></i>关闭
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="__static__/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="__static__/hplus/js/bootstrap.min.js?v=3.3.5"></script>
<script src="__static__/hplus/js/content.min.js?v=1.0.0"></script>
<script src="__static__/hplus/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__static__/hplus/js/plugins/validate/messages_zh.min.js"></script>
<script src="__static__/hplus/js/demo/form-validate-demo.min.js"></script>
<script src="__static__/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__static__/hplus/js/content.min.js?v=1.0.0"></script>

<script>
    $(function() {
        $("[data-toggle='tooltip']").tooltip();
        //是否勾选验证（通过checkbox选择的个数判断是否选择）
        var checked_length = $(".checkbox_block input[type='checkbox']:checked").length;
        $('#power_checked').val(checked_length);//初始化checkbox选择个数
        //全选/反选
        $('.checkbox-father').click(function () {
            var old_child_checked = $(this).parents('.checkbox_block').find(".checkbox_child input[type='checkbox']:checked").length;
            if (old_child_checked) {
                $(this).parents('.checkbox_block').find(".checkbox_child input[type='checkbox']").prop('checked', false);
                var new_child_length = $(this).parents('.checkbox_block').find(".checkbox_child input[type='checkbox']:checked").length;
                $('#power_checked').val(parseInt(checked_length)-parseInt(new_child_length));
            } else {
                $(this).parents('.checkbox_block').find(".checkbox_child input[type='checkbox']").prop('checked', true);
                var new_child_length = $(this).parents('.checkbox_block').find(".checkbox_child input[type='checkbox']:checked").length;
                $('#power_checked').val(parseInt(checked_length) + parseInt(new_child_length));
            }
        });

        $(".checkbox_child input[type='checkbox']").change(function() {
            var check_num = $('#power_checked').val();
            if ($(this).prop('checked')) { //如果选中，个数加1
                check_num++;
                $('#power_checked').val(check_num);
            }else{//取消选中时个数减一
                check_num--;
                $('#power_checked').val(check_num);
            }
        });
        //表单验证
        $("#addGroupForm").validate({
            ignore:'',
            rules: {
                group_name: {
                    required: true,
                },
                power_checked: {
                    required : true,
                    min:1,
                }
            },
            messages: {
                group_name: {
                    required: "请填写用户组名称"
                },
                power_checked : {
                    required: "请至少勾选一个子项",
                    min : "请至少勾选一个子项"
                }
            }
        });
    });
</script>
{% endblock %}